<div class="app-home-container">

  <div nz-row>

    <div nz-col nzSpan="17">
      <nz-card class="app-home-card app-home-left-card" [nzBordered]="false" appScrollbar appContainerCss>
        <div>
          <app-line-title title="图表示例"></app-line-title>
          <div echarts [options]="echartOption" class="app-home-chart"></div>
        </div>

        <div class="app-home-left-row">
          <app-task [taskObj]="taskObj" (moreClick)="toTaskList()" (itemClick)="toTaskInfo($event)"></app-task>
        </div>

        <div class="app-home-left-row">
          <app-notice [noticeList]="noticeList" (moreClick)="toNoticeList()" (itemClick)="toNoticeInfo($event)">
          </app-notice>
        </div>

      </nz-card>
    </div>

    <div nz-col nzSpan="7">
      <nz-card class="app-home-card" [nzBordered]="false" appScrollbar appContainerCss>

        <app-weather></app-weather>

        <div class="app-home-right-row">
          <div class="app-home-card-chart">
            <div class="app-chart-header">
              <div class="app-chart-meta-wrap">
                <app-line-title title="系统拦截指数"></app-line-title>
                <div class="app-chart-total app-text-primary">
                  <i nz-icon nzType="heart"></i>
                  <span appFlop data="15875" #interceptNum="letData">S-{{interceptNum.outputData}}</span>
                </div>
              </div>
            </div>
            <div class="app-chart-content">系统拦截指数级别分为1-5级</div>
            <div class="app-chart-footer">今日拦截系数：S-100</div>
          </div>
        </div>

        <div class="app-home-right-row">

          <div class="app-home-card-chart">
            <div class="app-chart-header">
              <div class="app-chart-meta-wrap">
                <app-line-title title="系统安全指数"></app-line-title>
                <div class="app-chart-total app-text-success">
                  <i nz-icon nzType="tag"></i>
                  <span appFlop data="387556" #securityNum="letData">S-{{securityNum.outputData}}</span>
                </div>
              </div>
            </div>
            <div class="app-chart-content">系统安全指数级别分为1-5级</div>
            <div class="app-chart-footer">今日安全系数：S-100</div>
          </div>

        </div>

        <div class="app-home-right-row">

          <div class="app-home-card-chart">
            <div class="app-chart-header">
              <div class="app-chart-meta-wrap">
                <app-line-title title="系统警告指数"></app-line-title>
                <div class="app-chart-total app-text-warning">
                  <i nz-icon nzType="meh"></i>
                  <span appFlop data="10235" #warningNum="letData">S-{{warningNum.outputData}}</span>
                </div>
              </div>
            </div>
            <div class="app-chart-content">系统警告指数级别分为1-5级</div>
            <div class="app-chart-footer">今日警告系数：S-100</div>
          </div>

        </div>

        <div class="app-home-right-row">

          <div class="app-home-card-chart">
            <div class="app-chart-header">
              <div class="app-chart-meta-wrap">
                <app-line-title title="系统错误指数"></app-line-title>
                <div class="app-chart-total app-text-error">
                  <i nz-icon nzType="radar-chart"></i>
                  <span appFlop data="10086" #errorNum="letData">S-{{errorNum.outputData}}</span>
                </div>
              </div>
            </div>
            <div class="app-chart-content">系统错误指数级别分为1-5级</div>
            <div class="app-chart-footer">今日错误系数：S-100</div>
          </div>

        </div>

      </nz-card>
    </div>
  </div>

</div>